<template>
	<view class="app-pages">
		<view class="time">
			<view class="date">
				<view class="">07月06日 周五</view>
				<u-icon name="minus" color="rgb(144, 147, 153)" size="24" :customStyle="{margin:'0 12rpx'}"></u-icon>
				<view class="">07月08日 周日</view>
			</view>
			<view class="">共2晚</view>
		</view>
		<view class="">
			商旅迷你间 1张1.05单人床 无早餐
		</view>
		<view class="introduce">
			<view class="introduce-text">根据防疫部门通知，防疫期间，市外来返人员</view>
			<view class="introduce-btn tips" @click="uPopupShow = true">订房必读</view>
		</view>

		<view class="room">
			<view class="title">订房信息</view>
			<u-number-box v-model="value">
				<view slot="minus" class="minus">
					<u-icon name="minus" size="12" color="rgb(144, 147, 153)"></u-icon>
				</view>
				<text slot="input" style="width: 60rpx;text-align: center;" class="input">{{value}}间</text>
				<view slot="plus" class="plus">
					<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
				</view>
			</u-number-box>
		</view>

		<u--form labelPosition="left" :model="form" :rules="formRules" ref="uForm" label-width="200rpx">
			<u-form-item :prop="'arr.'+index+'.userName'" borderBottom v-for="(item,index) in form.arr" :key="index"
				label-width="0rpx">
				<view class="">
					<view class="form-item">
						<view class="" style="width: 180rpx;">
							{{'房间'+(index+1)}}
						</view>
						<view class="">
							<u--input v-model="item.userName" border="none" placeholder="请输入姓名"></u--input>
						</view>
					</view>
					<view class="form-item-tips" v-if="(form.arr.length-1) == index">请输入住客姓名，每间仅需填1人，姓名不可重复</view>
				</view>
			</u-form-item>

			<u-form-item label="+ 86" prop="phone" :borderBottom="false">
				<u--input v-model.number="form.phone" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>

			<u-form-item label="预计到店时间" prop="phone" :borderBottom="false" :customStyle="{margin:'10rpx 0'}">
				<view class="flex-space" @click="handleTime">
					<view class="">20点</view>
					<u-icon name="arrow-right" color="rgb(144, 147, 153)" size="14"></u-icon>
				</view>
			</u-form-item>

			<u-form-item label="特殊要求" prop="phone" :borderBottom="false">
				<u--textarea v-model="value1" placeholder="请输入内容" autoHeight count :maxlength="200"></u--textarea>
			</u-form-item>

			<u-form-item label=" " prop="phone" :borderBottom="false">
				<view class="flex-right">
					<view class="submit">预订</view>
				</view>
			</u-form-item>
		</u--form>

		<!-- 订房必读 -->
		<u-popup :show="uPopupShow" mode="center">
			<view class="popup">
				<view class="cell">
					<u-cell :border="true">
						<view class="" slot="title">购票须知</view>
						<view class="" slot="value">
							<u-icon @click="uPopupShow = false" name="close-circle" size="30rpx"
								color="rgb(144, 147, 153)"></u-icon>
						</view>
					</u-cell>
					<view class="padding">

						<u-cell :border="false">
							<view class="tips" slot="title">订房必读</view>
							<text class="label" slot="label">
								1、开发时间：08:30-22:00；
								2、所有票型一经验证不予退款；
								3、门票当天有效，出园需入园，需再次购票；
								4、为保证入园顺利，预订时务必填写真实姓名、手机号等信息
							</text>
						</u-cell>

						<u-cell :border="false">
							<view class="tips" slot="title">入塔须知</view>
							<text class="label" slot="label">
								1、开发时间：08:30-22:00；
								2、所有票型一经验证不予退款；
								3、门票当天有效，出园需入园，需再次购票；
								4、为保证入园顺利，预订时务必填写真实姓名、手机号等信息
							</text>
						</u-cell>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 时间 -->
		<u-picker :show="show" :columns="columns" 
		title="预计到店时间" closeOnClickOverlay
		@cancel="close" @close="close" @confirm="confirm"></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				uPopupShow: false,
				show: false,
				columns: [
					['12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
				],
				value: 0,
				value1: '',
				form: {
					arr: [{
						userName: ''
					}, {
						userName: ''
					}, {
						userName: ''
					}],
					phone: ''
				},
				formRules: {
					userName: {
						required: false,
						message: '请输入姓名',
						trigger: 'bulr'
					},
					phone: {
						required: false,
						message: '请输入手机号',
						trigger: 'bulr'
					}
				}
			}
		},
		methods: {
			handleTime() {
				this.show = true
			},
			close() {
				this.show = false
			},
			confirm(options) {
				console.log(options)
				this.close()
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: '梅地亚中心'
			})
		}
	}
</script>
<style lang="scss" scoped>
	.form-item {
		display: flex;
		align-items: center;
	}
	
	.tips {
		// padding-top: 20rpx;
		// font-size: 26rpx;
		color: #F59A23;
	}
	
	.popup {
		width: 700rpx;
	
		.cell {
			box-shadow: none;
			margin-top: 0;
			.label {
				padding-left: 30rpx;
				padding-top: 20rpx;
			}
	
			.padding {
				padding: 0 40rpx;
			}
		}
	}

	.flex-space {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.submit {
		padding: 10rpx 25rpx;
		border-radius: 4rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #f74062;
	}

	.form-item-tips {
		font-size: 22rpx;
		color: rgba(255, 110, 0, 1);
		background-color: rgba(255, 110, 0, 0.1);
		padding: 14rpx 10rpx;
		margin-left: 10rpx;
		margin-top: 20rpx;
		display: inline-block;
	}

	.room {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.introduce {
		display: flex;
		margin: 20rpx 0 30rpx 0;
		align-items: center;
		justify-content: space-between;

		.introduce-text {
			width: 540rpx;
			font-size: 26rpx;
			display: -webkit-box;
			overflow: hidden;
			white-space: normal !important;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 1; //行数
			-webkit-box-orient: vertical
		}

		.introduce-btn {
			font-weight: bold;
		}
	}

	.time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;
		.date {
			display: flex;
			align-items: center;
		}
	}



	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
		white-space: nowrap;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
